import React, { useState } from 'react';
import { Form, Input, Button, Space, Card, Radio, Switch, FormInstance, Select } from 'antd';
import { PlusOutlined, DeleteOutlined, CodeOutlined } from '@ant-design/icons';
import { Choice } from '@/types/question';
import CodeBlockEditor from './CodeBlockEditor';

const { Option } = Select;

interface SingleChoiceFormProps {
  form: FormInstance;
}

const SingleChoiceForm: React.FC<SingleChoiceFormProps> = ({ form }) => {
  const [choices, setChoices] = useState<Choice[]>(
    form.getFieldValue('choices') || [
      { key: 'A', content: '' },
      { key: 'B', content: '' },
      { key: 'C', content: '' },
      { key: 'D', content: '' },
    ]
  );

  // 添加选项
  const addChoice = () => {
    const newKey = String.fromCharCode(65 + choices.length); // A, B, C, D...
    setChoices([...choices, { key: newKey, content: '' }]);
  };

  // 删除选项
  const removeChoice = (index: number) => {
    const newChoices = choices.filter((_, i) => i !== index);
    setChoices(newChoices);
    form.setFieldValue('choices', newChoices);
  };

  // 更新选项内容
  const updateChoice = (index: number, field: string, value: any) => {
    const newChoices = [...choices];
    newChoices[index] = { ...newChoices[index], [field]: value };
    setChoices(newChoices);
    form.setFieldValue('choices', newChoices);
  };

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <div>
        <div style={{ marginBottom: 16 }}>
          <strong>选项设置</strong>
          <Button 
            type="dashed" 
            icon={<PlusOutlined />} 
            onClick={addChoice}
            style={{ marginLeft: 16 }}
            size="small"
          >
            添加选项
          </Button>
        </div>

        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          {choices.map((choice, index) => (
            <Card
              key={choice.key}
              size="small"
              title={`选项 ${choice.key}`}
              extra={
                choices.length > 2 && (
                  <Button
                    type="text"
                    size="small"
                    danger
                    icon={<DeleteOutlined />}
                    onClick={() => removeChoice(index)}
                  >
                    删除
                  </Button>
                )
              }
            >
              <Space direction="vertical" style={{ width: '100%' }}>
                <Input
                  value={choice.content}
                  onChange={(e) => updateChoice(index, 'content', e.target.value)}
                  placeholder={`请输入选项${choice.key}的内容`}
                />

                <Space>
                  <span>包含代码：</span>
                  <Switch
                    checked={choice.has_code || false}
                    onChange={(checked) => updateChoice(index, 'has_code', checked)}
                    size="small"
                  />
                </Space>

                {choice.has_code && (
                  <div>
                    <Select
                      value={choice.language}
                      onChange={(value) => updateChoice(index, 'language', value)}
                      style={{ width: 150, marginBottom: 8 }}
                      placeholder="选择语言"
                    >
                      <Option value="cpp">C++</Option>
                      <Option value="c">C</Option>
                      <Option value="python">Python</Option>
                      <Option value="java">Java</Option>
                      <Option value="javascript">JavaScript</Option>
                    </Select>
                    <Input.TextArea
                      value={choice.code}
                      onChange={(e) => updateChoice(index, 'code', e.target.value)}
                      rows={4}
                      placeholder="请输入代码"
                    />
                  </div>
                )}
              </Space>
            </Card>
          ))}
        </Space>
      </div>

      {/* 正确答案 */}
      <Form.Item
        name="correct_answers"
        label="正确答案"
        rules={[{ required: true, message: '请选择正确答案' }]}
      >
        <Radio.Group>
          {choices.map((choice) => (
            <Radio key={choice.key} value={choice.key} style={{ display: 'block', marginBottom: 8 }}>
              选项 {choice.key}
            </Radio>
          ))}
        </Radio.Group>
      </Form.Item>

      {/* 隐藏字段：存储choices */}
      <Form.Item name="choices" hidden>
        <Input />
      </Form.Item>
    </Space>
  );
};

export default SingleChoiceForm;

